<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello World</title>
    <script src="../vue.js"></script>
    <!-- <script src="../velocity.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  </head>
  <body>
    <div id="root">
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
      >
        <div v-if="isShow">Hello World - {{ isShow }}</div>
      </transition>

      <button @click="isShow = !isShow">Toggle</button> <br /><br />

      <transition
        v-bind:css="false"
        @before-enter="beforeEnter2"
        @enter="enter2"
        @after-enter="afterEnter2"
        @before-leave="beforeLeave2"
        @leave="leave2"
        @before-leave="afterLeave2"
      >
        <div v-if="isShow2">Hello World2 - {{ isShow }}</div>
      </transition>
      <button @click="isShow2 = !isShow2">Toggle</button>
    </div>
    <script>
      const vm = new Vue({
        el: '#root',
        data: {
          isShow: true,
          isShow2: true
        },
        methods: {
          beforeEnter(el) {
            el.style.color = 'red'
          },
          enter(el, done) {
            setTimeout(() => {
              el.style.color = 'green'
            }, 1000)

            setTimeout(() => {
              done()
            }, 2000)
          },
          afterEnter(el) {
            el.style.color = 'black'
          },
          beforeEnter2(el) {
            el.style.opacity = 0
            el.style.transformOrigin = 'left'
          },
          enter2(el, done) {
            Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
            Velocity(el, { fontSize: '1em' }, { complete: done })
          },
          afterEnter2(el) {
            console.log('入场动画结束')
          },
          beforeLeave2(el) {
            el.style.transformOrigin = 'left'
          },
          leave2: function(el, done) {
            Velocity(
              el,
              { translateX: '15px', rotateZ: '50deg' },
              { duration: 600 }
            )
            Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
            Velocity(
              el,
              {
                rotateZ: '45deg',
                translateY: '30px',
                translateX: '30px',
                opacity: 0
              },
              { complete: done }
            )
          },
          afterLeave2(el) {
            console.log('出场动画结束')
          }
        }
      })
    </script>
  </body>
</html>
